<template>
  <!-- 类似工单，合同，项目管理表单设计器的表头步骤条如果一致可以使用该组件 -->
  <div class="project-setting-title setting-flow">
    <div class="setting-flow-header">
      <el-row class="setting-flow-header-left" type="flex">
        <p class="return-btn" @click="goBack"><i class="iconfont icon-arrow-left"></i> {{ $t('common.base.back') }}</p>

        <div>
          <el-row type="flex" style="height: 30px; max-width: 185px">
            <el-popover placement="bottom" width="224" trigger="click">
              <div class="choose-color-box">
                <div v-for="color in typeColor" :key="color" @click="changeColor(color)" :style="{ background: color }">
                  <i class="el-icon-check" v-if="currentTemplateColor === color"></i>
                </div>
              </div>
              <el-tooltip slot="reference" effect="dark" :content="$t('projectManage.setting.title.projectTemplateColor')" placement="bottom">
                <i class="type-color" :style="{ background: currentTemplateColor }"></i>
              </el-tooltip>
            </el-popover>
            <el-tooltip effect="dark" :content="$t('projectManage.setting.title.projectTemplateName')" placement="bottom">
              <el-input class="type-name" maxlength="20" :value="pageName" @blur="pageName = blurTemplateName(pageName)" @input="inputTemplateName" @focus="pageName = templateName" :placeholder="titlePlaceholder"></el-input>
            </el-tooltip>
          </el-row>
        </div>
      </el-row>

      <el-row class="setting-flow-header-step" type="flex">
        <div v-for="(step, index) in settingStep" :key="step.stepName" @click="handleClickTab(step)" :class="currentTabComponent === step.compName && 'active'">
          <i>{{ index + 1 }}</i>
          <div class="step-name">{{ step.stepName }}</div>
        </div>
      </el-row>

      <div class="setting-flow-header-right">
        <el-button class="header-save-btn" plain @click="handleSubmit" :loading="pending">{{ $t('common.base.save') }}</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { reactive, toRefs, watch } from 'vue';

import { typeColor } from '@src/modules/setting/projectManage/utils/index.js';

export default {
  props: {
    settingStep: {
      type: Array,
      default: () => [],
    },
    currentTabComponent: {
      type: String,
      default: '',
    },
    titlePlaceholder: {
      type: String,
      default: '',
    },
    // 模板名称
    templateName: {
      type: String,
      default: '',
    },
    // 模板颜色
    templateColor: {
      type: String,
      default: '',
    },
  },
  emits: ['handleInputTemplateName', 'clickTab', 'handleChangeColor', 'back', 'submit'],
  setup(props, { emit }) {
    const state = reactive({
      pageName: '',
      currentTemplateColor: '',
      pending: false,
    });

    watch(
      () => [props.templateName, props.templateColor],
      ([newVal, newColorVal]) => {
        state.pageName = newVal;
        state.currentTemplateColor = newColorVal;
      },
      { immediate: true }
    );

    // 失去焦点时格式化模板名称
    const blurTemplateName = name => {
      if (name.length > 9) {
        return `${name.slice(0, 9)}...`;
      }

      return name;
    };

    // 输入模板名称
    const inputTemplateName = val => {
      state.pageName = val;
      emit('handleInputTemplateName', val);
    };

    // 切换颜色
    const changeColor = color => {
      state.currentTemplateColor = color;
      emit('handleChangeColor', color);
    };

    // 返回
    const goBack = () => {
      emit('back');
    };

    // 点击步骤条
    const handleClickTab = val => {
      emit('clickTab', val);
    };

    // 保存提交
    const handleSubmit = () => {
      emit('submit');
    };

    return {
      blurTemplateName,
      inputTemplateName,
      changeColor,
      goBack,
      handleClickTab,
      handleSubmit,
      ...toRefs(state),
      typeColor,
    };
  },
};
</script>
<style lang="scss" scoped>
@import '@src/modules/setting/contract/contractSetting/flow/contractFlow.scss';
</style>